<template>
  <div id="l_modifyStudent">
    <h2>修改学生</h2>
    <table>
      <tr>
        <td>学生姓名:</td>
        <td><input type="text"  v-model="name"/></td>
      </tr>
      <tr>
        <td>学生年龄:</td>
        <td><input type="text" v-model="age"/></td>
      </tr>
      <tr>
        <td>学生性别:</td>
        <td>
          <input type="radio" name="sex" value="男" v-model="gender"/>男<input type="radio" name="sex" value="女"  v-model="gender"/>女
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <button id="modify_student" @click.prevent="updateSudent">
            确认修改
          </button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import bus from "./bus.js";
export default {
  props: ["student"],
  data() {
    return {
        id:"",
        name:"",
        age:"",
        gender:"",
        index:""
    };
  },
  methods: {
    updateSudent() {
    //  for(let i=0 ;i<=i<this.student.length;){
    //      if()
    //  }
    let student={
         id:this.id,
          name:this.name,
          age:this.age,
          gender:this.gender
    }
    this.student.splice(this.index,1, student);
    this.id="";
     this.name="";
            this.age="";
            this.gender="";
            this.index="";
    },
    
  },
   mounted(){
        bus.$on("_id", (_id) => {
        for(let i=0;i<this.student.length;i++){
            if(this.student[i].id==_id){
                this.age=this.student[i].age;
                 this.name=this.student[i].name;
                 this.gender=this.student[i].gender;
                 this.id=_id;
                 this.index=i;
                 break;

            }
        }
      });
   }
};
</script>

<style scoped>
#l_modifyStudent {
  margin: 0;
  box-sizing: border-box;
  width: 310px;
  height: 210px;
  background-color: white;
  border-radius: 5px;
  padding: 15px;
  margin-top: 10px;
}
tr {
  height: 35px;
}
td {
  font: 16px;
  font-weight: 500;
  height: 35px;
  line-height: 35px;
}
tr td:nth-child(2) {
  padding-left: 10px;
}
[type="radio"] {
  margin: 0 5px;
  vertical-align: middle;
}
#modify_student {
  width: 100%;
  border: 1px solid #ddd;
  height: 30px;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}
input {
  outline: none;
  border: 1px solid #ddd;
  height: 25px;
  border-radius: 5px;
}
</style>